
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Devv AI - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>Devv AI - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">概念</div>
          <div class="card-question">Devv AI 的核心定位和目标是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">概念</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Devv AI 是一款专为开发者打造的 AI 搜索引擎，其目标是取代传统的 Google、Stack Overflow 和文档查询工具，为开发者提供更智能、更高效的开发体验。</div>
          </div>
          <div class="card-source">来源: 文档第一段</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">Devv AI 提供了哪三种搜索模式？它们分别适用于什么场景？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Devv AI 提供三种搜索模式：1. 精确搜索：适用于开发者已明确知道要搜索的内容（如特定函数、类）。2. 模糊搜索：适用于开发者对要搜索的内容只有大致概念（如某个功能的实现方法）。3. 语义搜索：适用于开发者需要理解代码的含义或上下文（如某个算法的原理）。</div>
          </div>
          <div class="card-source">来源: Devv AI 的核心特点 > 2. 三种搜索模式</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">Devv AI 是如何将开发者的想法转化为可部署的 API 的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">开发者只需用自然语言描述所需的后端服务，Devv AI 就能自动生成代码片段。之后，开发者可以根据反馈进行迭代优化，并通过一键部署功能将 API 发布到生产环境中，整个过程无需本地设置或 DevOps 经验。</div>
          </div>
          <div class="card-source">来源: Devv AI 的核心特点 > 3. 一键 API 生成 和 5. 一键部署</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">对比</div>
          <div class="card-question">与传统搜索引擎相比，Devv AI 在代码理解方面有何显著优势？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">对比</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Devv AI 能够深度理解代码的语义和上下文，从而提供更精准的搜索结果和更智能的代码生成。相比之下，传统的搜索引擎通常只能进行简单的文本匹配，无法真正理解代码的含义。</div>
          </div>
          <div class="card-source">来源: Devv AI 与同行的区别 > 2. 深度理解代码</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">Devv AI 的“在线 API 测试”功能是如何帮助开发者的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">它提供了类似 Postman 的在线测试功能。每次代码文件更新后，Devv AI 会自动更新 Playground 选项卡，生成所有 API 及其必要的请求参数和 body，方便开发者直接测试 API 代码的正确性。</div>
          </div>
          <div class="card-source">来源: Devv AI 的核心特点 > 4. 在线 API 测试</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">Devv AI 自动生成的 API 文档包含了哪些详细信息？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">自动生成的 API 文档非常全面，内容包括：端点规范、URL 结构、HTTP 方法、请求参数和 body 模式、响应格式和示例、身份验证要求、交互式示例、标准错误代码及其含义、错误响应格式和故障排除指南。</div>
          </div>
          <div class="card-source">来源: Devv AI 的核心特点 > 6. 自动生成 API 文档</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">版本</div>
          <div class="card-question">Devv AI 提供了哪些不同的版本以满足不同用户的需求？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">版本</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Devv AI 提供三个版本：1. 免费版：适用于个人开发者和小型团队。 2. 专业版：适用于中型团队，提供更强大的功能。 3. 企业版：适用于大型企业，提供定制化的解决方案和专属技术支持。</div>
          </div>
          <div class="card-source">来源: Devv AI 的版本与适用人群</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">对比</div>
          <div class="card-question">在开发流程集成方面，Devv AI 与传统开发工具有何不同？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">对比</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Devv AI 集成了 API 生成、在线测试和一键部署等功能，简化了整个开发流程，提高了效率。而传统的开发工具通常需要开发者手动完成这些步骤，过程费时费力。</div>
          </div>
          <div class="card-source">来源: Devv AI 与同行的区别 > 3. 集成开发流程</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">Devv AI 的“一键部署”功能具体执行了哪些自动化操作？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">点击“一键部署”后，Devv AI 会自动打包代码、设置必要的基础设施，并将 API 部署到一个安全的、可用于生产的环境中，从而极大地简化了部署流程。</div>
          </div>
          <div class="card-source">来源: Devv AI 的核心特点 > 5. 一键部署</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
